<template>
    <div class="container">
        <navbar class="navbarb"> 
            <navbar-item type="back"></navbar-item>   
            <navbar-item type="title">
                <text class="headtext">注册</text>
            </navbar-item>
        </navbar>
        
        <scroller class="tablelist" :show-scrollbar="false">
        <div class="cell_list_box">
            
            <wxc-cell title="头像"
                :has-arrow="false"
                @wxcCellClicked="wxcCellClickedpiture"
                :has-top-border="false">
                <image class="avator" style="width:80;height:80" :src="avatorPath"></image>
            </wxc-cell>
            <wxc-cell title="用户名"
                :has-arrow="false"
                :has-margin="false"
                :has-top-border="false">
                <input
                    class="rightInput"
                   type="text"
                   autofocus="false"
                   placeholder="请输入用户名"
                   max-length="10"
                   value="" />
               
            </wxc-cell>
            <wxc-cell title="密码"
                :has-arrow="false"
                :has-margin="false"
                :has-top-border="false">
                <input
                    class="rightInput"
                   type="password"
                   autofocus="false"
                   placeholder="请输入密码"
                   max-length="16"
                   value="" />
               
            </wxc-cell>
            <wxc-cell title="确认密码"
                :has-arrow="false"
                :has-margin="true"
                :has-top-border="false">
                <input
                    class="rightInput"
                   type="password"
                   autofocus="false"
                   placeholder="请确认密码"
                   max-length="16"
                   value="" />
          
            </wxc-cell>
            <wxc-cell title="姓名"
                :has-arrow="false"
                :has-top-border="false">
                <input
                    class="rightInput"
                   type="text"
                   autofocus="false"
                   placeholder="请输入姓名"
                   max-length="10"
                   value="" />
                
            </wxc-cell>
            <wxc-cell title="性别"
                :has-arrow="false"
                @wxcCellClicked="pickDate"
                :has-top-border="false">
                <text class="righttext">{{sexValue}}</text>
            </wxc-cell>
            <wxc-cell title="身份"
                :has-arrow="false"
                @wxcCellClicked="pickId"
                :has-margin="false"
                :has-top-border="false">
                <text class="righttext">{{identityVal}}</text>
            </wxc-cell>
            <wxc-cell title="手机号"
                :has-arrow="false"
                @wxcCellClicked="wxcCellClicked"
                :has-top-border="false">
                <input
                    class="rightInput"
                   type="tel"
                   autofocus="false"
                   placeholder="请输入手机号"
                   max-length="11"
                   value="" />
               
            </wxc-cell>
            <wxc-cell title="邮箱"
                :has-arrow="false"
                @wxcCellClicked="wxcCellClicked"
                :has-margin="false"
                :has-top-border="false">
                <input
                    class="rightInput"
                   type="email"
                   autofocus="false"
                   placeholder="请输入邮箱"
                   value="" />
               
            </wxc-cell>
            <wxc-cell title="入学年"
                :has-arrow="false"
                @wxcCellClicked="wxcCellClicked"
                :has-margin="false"
                :has-top-border="false">
                <text class="righttext">请选择入学年</text>
            </wxc-cell>
            <wxc-cell title="学校（单位）编号"
                :has-arrow="false"
                @wxcCellClicked="wxcCellClicked"
                :has-top-border="false">
                <text class="righttext">请选择学校</text>
            </wxc-cell>
            <wxc-cell title="工号"
                :has-arrow="false"
                @wxcCellClicked="wxcCellClicked"
                :has-top-border="false">
                <text class="righttext">223444</text>
            </wxc-cell>

           
        </div>
        
         <button class="button" :eeui="{text:'提交',backgroundColor:'#1eb76e',fontSize:30}"></button>
         
                
        </scroller>



    </div>
</template>
<script>
    import { WxcCell } from 'weex-ui';
    const picture = app.requireModule('picture');
    const eeui = app.requireModule('eeui');
    const picker = weex.requireModule('picker');
    require("../../fetch");
     export default {
         components:{WxcCell},
         data(){
             return{
                 refreshing: false,
                loadinging: false,
                avatorPath:'../../assets/images/avator.png',
                sexValue:'男',
                sexList:['男','女'],
                identityVal:'教师',
                identity:['教师','学生']
             }
         },
         methods: {
             //头像选择
            wxcCellClickedpiture (e) {
                var self = this;
                picture.create({
                    gallery: 1,
                    type:'gallery',
                    mode:1,
                    crop:true,
                    ratioX:1,
                    ratioY:1,
                    circle:true,
                    cropGrid:false,
                    cropFrame:false,
                    compress:true,
                    freeCrop:true,
                    clickSound:true
                }, function(result) {
                     if(result.status == 'success'){
                         if(result.lists[0].compressed == true){
                             //eeui.toast(result.lists[0].compressPath);
                             self.avatorPath = result.lists[0].compressPath;

                             self.imgUpload(self.avatorPath);
                         }
                         
                         
                     } 


                });
            },
            wxcCellClicked (e) {
                
            }, 
            loginpage(){
                eeui.openPage({
                    url: '../loginPage/loginpage.js',
                    statusBarColor:'#1eb76e',
                    animated:false
                }, function(result) {
                    //......
                }); 
            },
            pickDate(){
                let self = this;

                picker.pick({
                    items:self.sexList
                },event => {
                    if(event.result === 'success'){
                        self.sexValue = self.sexList[event.data];
                    }
                })
            },
            pickId(){
                let self = this;
                picker.pick({
                    items:self.identity
                },event => {
                    if(event.result === 'success'){
                        self.identityVal = self.identity[event.data];
                    }
                })
            },
            pickTime(){
                let self = this;
                picker.pick({
                    items:[],
                },event => {
                    if(event.result === 'success'){
                        self.identityVal = self.identity[event.data];
                    }
                })
            },
            //图片上传
            imgUpload(imgurl){
                let params = {
                    base_64_img:imgurl
                };

                this.$fetch({
                    name: 'imgUpload', // api.js文件中的key
                    method: 'POST',
                    data: params,
                }).then((res) => {
                    // 返回数据
                    eeui.toast(res)
                    
                }).catch((err) => {
                    eeui.alert({
                        title: '温馨提示',
                        message: imgurl,
                    }, function() {
                        //......
                    });
                });
            }
            

            
                
            
        }
     }
</script>
<style scoped>
.container{
    background-color:#ebebeb;
    
    /* margin-bottom:200px; */
}
.tablelist{
    /* height:2000; */
}
.cell_list_box{
    height:auto;
    margin-bottom: 50px;
}
.navbarb{
        width: 750px;
        height: 100px;
        background-color: #1eb76e;
    }
.headtext {
        font-size: 30px;
        color: #ffffff;
    }
.righttext{
    /* margin-right:20px; */
    font-size:28;
    color:#333;
}
.rightInput{
    width: 300;
    height: 40;
    font-size: 28;
    text-align: right;
}
.avator{
    border-radius:100;
    margin-right:10;
}
.backIcon{
    width: 100px;
    height: 100px;
    color: #ffffff;
}
.button{
    width: 690px;
    height: 80px;
    margin-left: 30;
    margin-bottom: 50px;
}
</style>